<template>
    <u-transition :show="show" mode="slide-right">
        <view class="AddLoginConfigPopup">
            <view class="content f_1 scroll-y">
                <u--form labelPosition="left" :model="awardData" :rules="rules" ref="uForm">
                    <u-form-item label="开奖时间" prop="time" borderBottom @click="awardTimeShow = true; hideKeyboard()"
                        required>
                        <u--input v-model="awardData.awardTime" disabled disabledColor="#ffffff" placeholder="请选择开奖时间"
                            border="none"></u--input>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
                    <u-form-item label="联系方式" prop="phone" borderBottom required>
                        <u--input v-model="awardData.awardLinkWay" type="number" :maxlength="11" border="none"
                            placeholder="考试兑奖联系方式"></u--input>
                    </u-form-item>
                </u--form>
                <view class="line" style="height: 3px"></view>
                <view class="award-list">
                    <u--form v-for="(item, index) in awardData.awardList" :key="index" labelPosition="left"
                        :model="item">
                        <u-form-item prop="awardName" borderBottom>
                            <view class="flex">
                                <view class="flex" style="font-size: 32rpx;">
                                    <u-icon name="minus-circle" color="red" size="22" @click="remove(index)"></u-icon>
                                    <view style="margin-left: 5px;">
                                        {{ `奖项${chineseNums[index]}` }}
                                    </view>
                                </view>
                                <u--input v-model="item.awardName" border="none" placeholder="请输入奖品名称">
                                </u--input>
                            </view>
                        </u-form-item>

                        <u-form-item borderBottom>
                            <view class="award-label">
                                奖项个数
                                <u--input v-model="item.awardNum" border="none" placeholder="请输入奖品数量"></u--input>
                            </view>
                        </u-form-item>

                        <u-form-item borderBottom>
                            <view class="award-label">
                                中奖最低分
                                <u--input v-model="item.awardMin" border="none" placeholder="请输入分数"></u--input>
                            </view>

                        </u-form-item>

                    </u--form>
                </view>
                <view class="add-rule flex-row  center" @click="addRule">
                    <u-icon name="plus-circle" color="#37B874" size="20"></u-icon>
                    <view style="margin-left: 12px">添加规则</view>
                </view>
                <view class="line" style="height: 3px"></view>

            </view>

            <view class="footer fs_0">
                <!-- <view class="line" style="height: 3px"></view> -->
                <view class="confirm btn" @click="confirm">确定</view>
                <view class="line"></view>
                <view class="close btn" @click="onClose">取消</view>
            </view>
            <u-datetime-picker mode="datetime" :formatter="formatter" :show="awardTimeShow" :value="awardTimeDate"
                closeOnClickOverlay @confirm="handleConfirm" @cancel="awardTimeShow = false;"
                @close="awardTimeShow = false;" ref="datetimePicker"></u-datetime-picker>
        </view>
    </u-transition>
</template>
<script>
const chineseNums = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
export default {
    name: "AwardSetting",
    data() {
        return {
            awardTimeShow: false,
            awardTimeDate: Number(new Date()),
            chineseNums,
            show: false,
            awardInfo: {
                awardName: "",
                awardNum: null,
                awardNo: 1,
                awardMax: null,
                awardMin: null,
            },
            awardData: {
                awardTime: "",
                awardLinkWay: "",
                awardList: [{
                    awardName: "",
                    awardNum: '',
                    awardNo: 1,
                    awardMax: null,
                    awardMin: null,
                }],
            },
            rules: {
                time: {
                    type: 'string',
                    required: true,
                    message: '请选择开奖时间',
                    trigger: ['blur', 'change']
                },
                phone: {
                    type: 'number',
                    required: true,
                    message: '请选择输入联系方式',
                    trigger: ['blur', 'change']
                },
            },
        }
    },
    computed: {

    },
    methods: {
        hideKeyboard() {
            uni.hideKeyboard()
        },
        handleConfirm(e) {
            this.awardTimeShow = false;
            this.awardData.awardTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
        },
        handleClose(type) {
            if (type === 'end') {
                this.endTimeShow = false;
                this.$refs.uForm.validateField('endTime')
            } else {
                this.startTimeShow = false;
                this.$refs.uForm.validateField('startTime')
            }
        },
        addRule() {
            this.awardData.awardList.push({
                awardName: "",
                awardNum: '',
                awardNo: this.awardData.awardList.length + 1,
                awardMax: null,
                awardMin: null,
            })
        },
        // 格式月份
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }
            if (type === 'month') {
                return `${value}月`
            }
            if (type === 'day') {
                return `${value}日`
            }
            return value
        },
        open(data) {
            if (data) {
                this.awardData = { ...data, awardList: data.awardList && data.awardList.length != 0 ? data.awardList : [this.awardInfo]};
            }
            this.show = true;
        },
        onClose() {
            this.show = false;
            this.$emit("close")
        },
        add() {
            this.jsonData.options.push("")
            console.log(this.$refs.optionScroll)
            this.$refs.optionScroll.scrollTo({
                scrollTop: 99999,
                duration: 300
            })
        },
        remove(index) {
            if (this.awardData.awardList.length === 1) {
                uni.showToast({
                    title: "至少有一个奖项",
                    icon: "none",
                    duration: 2000
                });
                return
            }
            this.awardData.awardList.splice(index, 1);
        },
        confirm() {
            if (!this.awardData.awardTime) {
                uni.showToast({
                    title: "请填写开奖时间",
                    icon: "none",
                    duration: 2000
                });
                return
            }
            if (!this.awardData.awardLinkWay) {
                uni.showToast({
                    title: "请填写联系方式",
                    icon: "none",
                    duration: 2000
                });
                return
            }
            for (const item of this.awardData.awardList) {
                if (!item.awardName || !item.awardNum || !item.awardMin) {
                    uni.showToast({
                        title: "请完善奖项信息",
                        icon: "none",
                        duration: 2000
                    });
                    return
                }
            }
            // this.awardData.awardList.forEach((i, index) => {
            //     i.awardMax = index > 0 ? this.awardData.awardList[index - 1].awardMin : null
            // })
            this.$emit("confirm", this.awardData)
            this.show = false
        }

    },
}
</script>
<style scoped lang="scss">
.AddLoginConfigPopup {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;

    .award-list {
        //  padding-left: 20px;
    }

    .award-label {
        display: flex;
        padding-left: 25px;
        font-size: 32rpx;
    }

    .add-rule {
        background-color: #FFFFFF;
        padding: 29rpx;
        border-bottom-left-radius: 24rpx;
        border-bottom-right-radius: 24rpx;
    }

    .title {
        color: #333333;
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        height: 75px;
        line-height: 75px;
    }



    .content {
        height: calc(100vh - 158px);
    }

    .footer {
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    .btn {
        height: 74px;
        text-align: center;
        line-height: 74px;
        color: #000000;
        font-size: 14px;
    }

    .line {
        width: 100%;
        background-color: #F2F2F2;
        height: 6rpx;
    }
}
</style>